<!-- -------- 首页 ------- -->
<template>
  <headerView v-if="H5Web"></headerView>
  <div class="homeView" v-if="H5Web">
    <!-- 广告banner区域 s -->
    <!-- <div class="banner" v-if="videoShow">
      <img src="../../assets/images/fengmian.png" class="video-home" alt="" />
      <div class="banner-text">
        <h2 class="h2"><span>万物通 供应链</span></h2>
        <p>二类电商 优质供应商</p>
        <div class="banner-btn">
          <div class="el-button cursor" @click="goodsLogin">选品中心</div>
          <div class="el-button cursor" @click="shuzidap">数字大屏</div>
        </div>
      </div>
    </div> -->
    <div class="banner">
      <video
        class="w-full h-full object-cover video-home"
        ref="videoRef"
        preload="auto"
        :autoplay="true"
        loop="loop"
        playsinline="true"
        muted="muted"
      >
        <source src="../../assets/home-video.mp4" type="video/mp4" />
      </video>
      <div class="banner-text">
        <!-- preload="auto" -->
        <h2 class="h2"><span>万物通 供应链</span></h2>
        <p>二类电商 优质供应商</p>
        <div class="banner-btn">
          <div class="el-button cursor" @click="goodsLogin">选品中心</div>
          <div class="el-button cursor" @click="shuzidap">数字大屏</div>
        </div>
      </div>
    </div>
    <!-- 广告banner区域 e -->
    <div style="margin-top: 38vw"></div>
    <!-- 关于万物通  -->
    <div class="andConter center-text">
      <h3 class="andTile">关于<span class="and">万物通</span></h3>
      <div class="andText">
        <p>万物通，通万物！二类电商优质供应商！</p>
        <p>
          <b>万物通供应链：</b
          >万物通供应链，聚焦于二类电商平台，货盘稳定，品类齐全，服务高效！专注服务于政企福利平台，
          银行、航空等内部商城、私域电商的货品供应及数实融合的供应链解决方案！
        </p>
        <p>
          <b>万物通SCM：</b>
          万物通凭借强大的供应商管理体系及深厚品牌沉淀，已经实现供应链管理的数字化转型。
          通过融合线上线下资源，借用自主开发的SCM管理系统，已成功实现从采购、生产、仓储、物流到销售等各个环节的信息透明化和协同运作。
        </p>
        <p><b>万物通理念：</b>“安全、高效、创新、共赢</p>
        <p>
          <b> 万物通愿景：</b
          >利用数字化方式，不断探索物联网、大数据等技术在供应链领域的深度应用，赋能实体供应链转型升级，推动实体经济与数字经济的深度融合！共创新质生产力！
          <span @click="$router.push('/about')" class="cursor"
            >进一步了解 ></span
          >
        </p>
        <!-- 万物通是一家专注于<b>供应链提供</b>及<b>数实融合</b>解决方案的创新型企业，植根于数字经济发展的前沿阵地，致力于构建高效、智能、协同、供销一体化服务平台。
            万物通凭借其强大的供应链及深厚品牌沉淀，深度聚焦供应链管理数字化转型，通过整合线上线下资源，打造了无缝链接生产端与消费端的一体化生态系统。
            公司的核心业务集中于<b>优化供应链流程</b>，<b>打破传统壁垒</b>，实现从<b>采购、生产、仓储、物流</b>到<b>销售</b>等各个环节的信息透明化和协同运作，有效提升产业链整体效能。 -->
      </div>
    </div>
    <!-- 关于万物通 -->
    <!-- 为什么选择万物通 -->
    <div class="skill center-text">
      <h3 class="andTile">为什么选择<span class="and">万物通</span></h3>
      <div class="skill-box">
        <div class="item">
          <img class="image" src="../../assets/images/home-whxz1.png" alt="" />
          <span class="item-t">安全可靠</span>
          <p class="content">正品保障</p>
          <p class="content">品类齐全</p>
        </div>
        <div class="item">
          <img class="image" src="../../assets/images/home-whxz2.png" alt="" />
          <span class="item-t">高效精准</span>
          <p class="content">发货及时</p>
          <p class="content">用户精准</p>
        </div>
        <div class="item">
          <img class="image" src="../../assets/images/home-whxz3.png" alt="" />
          <span class="item-t">货盘稳定</span>
          <p class="content">省时省力</p>
        </div>
      </div>
      <div class="skill-text">
        <div class="item-text">
          <div class="text-h">
            <el-statistic class="top" :value="outputValue1" />
            <span class="topr">天客服</span>
          </div>
          <span class="text-t">安全高效配合</span>
        </div>
        <div class="item-text">
          <div class="text-h">
            <el-statistic class="top" :value="outputValue2" />
            <span class="topr"></span>
          </div>
          <span class="text-t">一级品牌授权</span>
        </div>
        <div class="item-text">
          <div class="text-h">
            <el-statistic class="top" :value="outputValue3" />
            <span class="topr"></span>
          </div>
          <span class="text-t">源头工厂直供</span>
        </div>
        <div class="item-text">
          <div class="text-h">
            <el-statistic class="top" :value="outputValue4" />
            <span class="topr"></span>
          </div>
          <span class="text-t">真实有效SKU</span>
        </div>
        <div class="item-text">
          <div class="text-h">
            <el-statistic class="top" :value="outputValue5" />
            <span class="topr"></span>
          </div>
          <span class="text-t">API免费接入</span>
        </div>
      </div>
    </div>
    <!-- 为什么选择万物通 -->

    <!-- 首页推荐s -->
    <div class="publicity">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane
          v-for="item in publicityData"
          :key="item.text"
          :label="item.text"
          :name="item.text"
        >
          <div class="tabs-content">
            <div class="tab-img anima-img">
              <img
                src="../../assets/images/home-gyl1.png"
                alt=""
                v-show="activeName == '供应链'"
              />
              <img
                src="../../assets/images/home-ssyt1.png"
                alt=""
                v-show="activeName == '数实一体化'"
              />
              <img
                src="../../assets/images/home-yxtx1.png"
                alt=""
                v-show="activeName == '营销体系'"
              />
            </div>
            <div class="tab-text anima-text" v-show="activeName == '供应链'">
              <div class="top">
                <img src="../../assets/images/home-gyl2.png" alt="" />
                <div class="name">
                  <b>供应链</b>
                  <span>源头供应商 源头品牌商</span>
                </div>
              </div>
              <div class="content">
                <p>真实、有效供应链，打通上下游，提高运营效率。</p>
                <p>API对接，实现数据智能化、透明化和自动化。</p>
                <p>实时数据采集，提高供应链的敏捷性和高效性。</p>
              </div>
              <div class="tab-btn">
                <div class="div cursor" @click="goodsLogin">选品中心</div>
                <div class="div cursor" @click="fnRouteL">商城登录</div>
              </div>
            </div>
            <div
              class="tab-text anima-text"
              v-show="activeName == '数实一体化'"
            >
              <div class="top">
                <img src="../../assets/images/home-ssyt2.png" alt="" />
                <div class="name">
                  <b>数实一体化</b>
                  <span>API技术支撑 数字化运营</span>
                </div>
              </div>
              <div class="content">
                <p>发展数智融合供应链</p>
                <p>自有技术开发团队</p>
                <p>共创新质生产力</p>
              </div>
              <div class="tab-btn">
                <div class="div cursor" @click="fnRouteL">我要合作</div>
                <div class="div cursor" @click="shuzidap">数字大屏</div>
              </div>
            </div>
            <div class="tab-text anima-text" v-show="activeName == '营销体系'">
              <div class="top">
                <img src="../../assets/images/home-yxtx2.png" alt="" />
                <div class="name">
                  <b>营销体系</b>
                  <span>一件代发、项目集采、开发定制、批量集采</span>
                </div>
              </div>
              <div class="content">
                <p>福利礼品</p>
                <p>APP/小程序私域商城</p>
                <p>跨境电商/直播电商</p>
                <p>线下实采</p>
              </div>
              <div class="tab-btn">
                <div class="div cursor" @click="goodsLogin">选品中心</div>
                <div class="div cursor" @click="shuzidap">数字大屏</div>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 首页推荐e -->

    <!-- 我们拥有的渠道 -->
    <div class="ditch center-text">
      <h3 class="andTile">销售<span class="and">渠道</span></h3>
      <div class="image-box">
        <div
          class="images"
          ref="slide"
          @touchstart="webstart($event)"
          @touchmove="move($event)"
          @touchend="webend($event)"
        >
          <img
            src="../../assets/images/home-ditch1.png"
            alt=""
            :style="{ transform: `translateX(${imgLate}vw)` }"
          />
          <img
            src="../../assets/images/home-ditch2.png"
            alt=""
            :style="{ transform: `translateX(${imgLate}vw)` }"
          />
          <img
            src="../../assets/images/home-ditch3.png"
            alt=""
            :style="{ transform: `translateX(${imgLate}vw)` }"
          />
          <img
            src="../../assets/images/home-ditch4.png"
            alt=""
            :style="{ transform: `translateX(${imgLate}vw)` }"
          />
          <img
            src="../../assets/images/home-ditch5.png"
            alt=""
            :style="{ transform: `translateX(${imgLate}vw)` }"
          />
          <img
            src="../../assets/images/home-ditch6.png"
            alt=""
            :style="{ transform: `translateX(${imgLate}vw)` }"
          />
        </div>
      </div>
      <div class="icon-box cursor">
        <i
          class="iconfont icon-zuo"
          @click="imglateFn(0)"
          :style="{ color: imgNum == 0 ? '#999' : '' }"
        ></i>
        <i
          class="iconfont icon-you"
          @click="imglateFn(1)"
          :style="{ color: imgNum == 3 ? '#999' : '' }"
        ></i>
      </div>
      <div class="dotted_box">
        <ul class="item_box">
          <li
            class="item"
            v-for="item in 6"
            :key="item"
            :style="{
              backgroundColor: item == imgNum + 1 ? '#049de0' : '#a9a9a9',
            }"
          ></li>
        </ul>
      </div>
    </div>
    <!-- 整合 -->
    <div class="integrate">
      <h3 class="andTile center-text">
        供应链资源<span class="and">整合</span>
      </h3>
      <div class="items">
        <div class="item">
          <div class="left">01.</div>
          <div class="right">
            <h4 class="tit">源头供应链</h4>
            <div class="tet_box">
              <p class="tet">源头品牌工厂 品质保障，利润保障</p>
              <p class="tet">供应链协同 安全、可靠、高效</p>
              <p class="tet">供货稳定 有效寻源，减少供应风险</p>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="left">02.</div>
          <div class="right">
            <h4 class="tit">供销一体平台</h4>
            <div class="tet_box">
              <p class="tet">供货稳定 有效寻源，减少供应风险</p>
              <p class="tet">供应链效能 无缝衔接供、采、销，提高运营效率</p>
              <p class="tet">快速反应 商品信息共享， 统一调度，及时响应需求</p>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="left">03.</div>
          <div class="right">
            <h4 class="tit">定制供应链</h4>
            <div class="tet_box">
              <p class="tet">需求定制 个性化、多元化市场采购需求</p>
              <p class="tet">
                产品定制 快速匹配产品，优化采购成本，提升采购效率
              </p>
              <p class="tet">
                服务定制 采购、物流各环节，按客户需求配合调整、优化
              </p>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="left">04.</div>
          <div class="right">
            <h4 class="tit">供应链智慧管理</h4>
            <div class="tet_box">
              <p class="tet">实时数据 实时数据采集、智能分析和优化决策</p>
              <p class="tet">技术支持 自有SCM系统，实现全程智能化、透明化</p>
              <p class="tet">
                数实协同 供采销一体化协同，数字化运营+实体供应链
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 合作 -->
    <div class="teamwork center-text">
      <h3 class="andTile">供应链<span class="and">合作</span></h3>
      <div
        class="img-box"
        @touchstart="webstart($event)"
        @touchmove="move($event)"
        @touchend="webend($event)"
      >
        <div class="image" :style="{ transform: `translateX(${teamImg}vw)` }">
          <p class="top">
            <span>
              <strong>供应商</strong>
            </span>
            <b>supplier</b>
          </p>
          <div class="botm">
            <h4>合作要求</h4>
            <h5>
              <b>供应商合作要求</b>
            </h5>
            <p>
              源头工厂:自有品牌，产品线成熟，有天猫/京东等线上商城，支持比价，产品可提供一件代发。能够满足线下实采、产品定制、招投标服务能力。
            </p>
            <p>
              品牌方:产品线成熟，可开具一级/二级品牌授权，有天猫/京东等线上商城，支持比价，产品可提供一件代发。
            </p>
            <span class="cursor" @click="fnRouteL">我要入驻</span>
          </div>
        </div>
        <div class="image" :style="{ transform: `translateX(${teamImg}vw)` }">
          <p class="top">
            <span>
              <strong>分销商</strong>
            </span>
            <b>distributor</b>
          </p>
          <div class="botm">
            <h4>合作要求</h4>
            <h5>
              <b>分销商合作要求</b>
            </h5>
            <p>1、具有分销能力，实体商超或贸易商均可。</p>
            <p>2、自有销售渠道，线上线下不限，品类不限!</p>
            <p>
              各业态合作伙伴满足资质要求共享万物通数字供应链，实现一件代发，商品配送，库存共享渠道共建等服务。
            </p>
            <span class="cursor" @click="fnRouteL">我要入驻</span>
          </div>
        </div>
        <div class="image" :style="{ transform: `translateX(${teamImg}vw)` }">
          <p class="top">
            <span>
              <strong>平台商</strong>
            </span>
            <b>Platform vendors</b>
          </p>
          <div class="botm">
            <h4>合作要求</h4>
            <h5>
              <b>平台商合作要求</b>
            </h5>
            <p>1.银行、航空、政企等福利积分商城。</p>
            <p>2.具有销售能力的企业/个人私域商城</p>
            <p>3.具备良好的商誉及信用值</p>
            <span class="cursor" @click="fnRouteL">我要入驻</span>
          </div>
        </div>
        <div class="image" :style="{ transform: `translateX(${teamImg}vw)` }">
          <p class="top">
            <span>
              <strong>项目合伙人</strong>
            </span>
            <b>Engagement partner </b>
          </p>
          <div class="botm">
            <h4>合作要求</h4>
            <h5>
              <b>项目合伙人合作要求</b>
            </h5>
            <p>1.具有良好商务能力和分销网络销售渠道，线上线下不限，品类不限!</p>
            <p>2.具备合作双赢多赢的团队意识</p>
            <p>3.具备挑战高薪的能力和信心</p>
            <span class="cursor" @click="fnRouteL">我要入驻</span>
          </div>
        </div>
        <div class="image" :style="{ transform: `translateX(${teamImg}vw)` }">
          <p class="top">
            <span>
              <strong>其它伙伴</strong>
            </span>
            <b>Other partners</b>
          </p>
          <div class="botm">
            <h4>其它伙伴</h4>
            <h5>
              <b>其它伙伴</b>
            </h5>
            <p>欢迎以下人员加入</p>
            <p>1.拥有供应链开发管理经验者</p>
            <p>2.拥有业务开拓能力者</p>
            <p>3.拥有企业内部管理经验者</p>
            <p>4.拥有电商运营经验者</p>
            <span class="cursor" @click="fnRouteL">我要入驻</span>
          </div>
        </div>
      </div>
      <div class="dotted_box">
        <ul class="item_box">
          <li
            class="item"
            v-for="item in 5"
            :key="item"
            :style="{
              backgroundColor: item == teamImgNum + 1 ? '#049de0' : '#a9a9a9',
            }"
          ></li>
        </ul>
      </div>
    </div>
    <!-- 数字一体 -->
    <div class="numReal">
      <h3 class="andTile center-text">数实<span class="and">一体化</span></h3>
      <div class="num-box">
        <div class="item">
          <h4>01</h4>
          <h5>数字化供应链管理</h5>
          <span class="span">供应链可视化平台</span>
          <span class="span">智能化供、采、销</span>
          <img src="../../assets/images/num-real1.png" alt="" />
        </div>
        <div class="item">
          <h4>02</h4>
          <h5>二类/私域电商搭建</h5>
          <span class="span">二类电商服务</span>
          <span class="span">私域电商解决方案</span>
          <img src="../../assets/images/num-real2.png" alt="" />
        </div>
        <div class="item">
          <h4>03</h4>
          <h5>平台运维与增值服务</h5>
          <span class="span">线上线下融合营销</span>
          <span class="span">客户反向定制服务</span>
          <img src="../../assets/images/num-real3.png" alt="" />
        </div>
        <div class="item">
          <h4>04</h4>
          <h5>实体质量管理</h5>
          <span class="span">产品/品牌/质量溯源管理</span>
          <span class="span">智能化物流</span>
          <img src="../../assets/images/num-real4.png" alt="" />
        </div>
      </div>
    </div>
    <!-- 品牌 -->
    <div class="brand-box">
      <h3 class="andTile center-text">部分<span class="and">合作品牌</span></h3>
      <div class="image-bar">
        <!-- v-img-lazy="'/src/assets/images/brand-img.png'" -->
        <img
          src="../../assets/images/brand-img.png"
          alt=""
          style="width: 100%; height: 100%"
        />
      </div>
    </div>
  </div>
  <!-- ---------------------web---------------- -->
  <div class="hometow" v-else-if="!H5Web">
    <home-web></home-web>
  </div>
  <bottomView></bottomView>
</template>
<script setup>
import { onMounted, ref, onUnmounted, nextTick } from "vue";
import { useTransition } from "@vueuse/core";
import { useRouter } from "vue-router";
const Router = useRouter();
// video
const videoRef = ref(null);
const videoShow = ref(true);
const H5Web = ref(true);
onMounted(() => {
  // videoRef.value.playbackRate = 0.3
  window.addEventListener("scroll", handleScroll);
  autoImage2();
  autoImage();
  if (window.innerWidth < 750) {
    H5Web.value = false;
  }
  nextTick(() => {
    setTimeout(() => {
      videoShow.value = false;
    }, 500);
  });
});

// 数字动画
const skillNum1 = ref(0);
const skillNum2 = ref(0);
const skillNum3 = ref(0);
const skillNum4 = ref(0);
const skillNum5 = ref(0);
const outputValue1 = useTransition(skillNum1, {
  duration: 1500,
});
const outputValue2 = useTransition(skillNum2, {
  duration: 1500,
});
const outputValue3 = useTransition(skillNum3, {
  duration: 1500,
});
const outputValue4 = useTransition(skillNum4, {
  duration: 1500,
});
const outputValue5 = useTransition(skillNum5, {
  duration: 1500,
});
const scrollPosition = ref(0);
// 监听滚动事件
const handleScroll = () => {
  scrollPosition.value = window.scrollY || window.pageYOffset;
  const scroll = scrollPosition.value * 100;
  const num = scroll / window.innerWidth;
  if (num > 39.5253) {
    skillNum1.value = 365;
    skillNum2.value = 3000;
    skillNum3.value = 1500;
    skillNum4.value = 30000;
    skillNum5.value = 15000;
  }
};

// 组件卸载前移除监听器
onUnmounted(() => {
  window.removeEventListener("scroll", handleScroll);
});

// 技术服务
const publicityData = ref([
  {
    text: "供应链",
    img: "",
    content: {
      title: "直接对接品牌源头工厂",
      content: `省去中间环节   通供应链上下游,形成无缝衔接的流程，提高整体运营效率。自有的技术开发，实现供应链全程的智能化、透明化和自动化。`,
      bottom:
        "通过实时数据采集、智能分析和优化决策，提高供应链的敏捷性、和可持续性。",
    },
  },
  {
    text: "营销体系",
    img: "",
    content: {
      title: "自有的技术开发，实现供应链全程的智能化",
      content: `覆盖福利礼品集采 、 APP小程序的私域自建商城、跨境渠道、直播电商及线下实采的五大场景需求。`,
      bottom: "满足一件代发、。项目集采、开发定制、批量采购四大营销类型。",
    },
  },
  {
    text: "数实一体化",
    img: "",
    content: {
      title: "运用物联网、大数据和人工智能技术",
      content: `实现供应链全流程的智能优化，结合线上流量与线下体验，开展新零售模式，提供个性化、精准化的营销和服务体验。`,
      bottom: "以数智化方式 全共创新质生产力新赋能实体经济 共创新质生产力",
    },
  },
]);
//
const activeName = ref("供应链");
const handleClick = (tab, event) => {};
const brandNum = ref(1);
// 渠道
// function brandfn(num) {
//    brandNum.value = num
// }
const goodsLogin = () => {
  window.open("https://xp.wwtscm.com/#/");
};
const shuzidap = () => {
  window.open(Router.resolve({ path: "/visual" }).href, "_blank");
};
// 我们拥有的渠道
const imgLate = ref(0);
const imgNum = ref(0);
function imglateFn(num) {
  if (num == 0 && imgNum.value > 0) {
    imgNum.value--;
    imgLate.value += 18;
  } else if (num == 1 && imgNum.value < 3) {
    imgLate.value -= 18;
    imgNum.value++;
  }
}

//
const fnRouteL = () => {
  window.open("https://www.wwtscm.com/");
};
// 移动端滑动、
const flag = ref(false);
const startX = ref(0);
const endX = ref(0);
// const msg = ref('')
const slide = ref(null);
// const transY = ref(0)
const webstart = (e) => {
  //记录开始滑动屏幕的X轴的位置
  flag.value = true;
  startX.value = e.touches[0].clientX;
  endX.value = slide.value.offsetLeft;
};
function move(e) {
  // var moveX
  // if (flag.value) {
  //    // 处理鼠标移动的逻辑
  //    moveX = endX.value + (e.touches[0].clientX - startX.value);  //计算滑动的距离
  // }
}
const webend = (e) => {
  if (flag.value) {
    flag.value = false;
    var moveX = e.changedTouches[0].clientX - startX.value; //计算滑动的距离
    if (moveX < 0 && imgNum.value < 5) {
      //向左滑动
      imgNum.value++;
      imgLate.value = imgLate.value - 70;
    } else if (moveX > 0 && imgNum.value > 0) {
      imgNum.value--;
      imgLate.value = imgLate.value + 70;
      // autoImage()
    }
  }
};
const teamImg = ref(0);
const autoImage = () => {
  if (window.innerWidth < 1000) {
    setInterval(() => {
      if (imgNum.value > 4) {
        //向左滑动
        imgNum.value = 0;
        imgLate.value = 0;
      } else {
        imgNum.value++;
        imgLate.value = imgLate.value - 70;
      }
    }, 3500);
  }
};
const teamImgNum = ref(0);
const autoImage2 = () => {
  if (window.innerWidth < 1000) {
    setInterval(() => {
      if (teamImgNum.value > 3) {
        //向左滑动
        teamImgNum.value = 0;
        teamImg.value = 0;
      } else {
        teamImgNum.value++;
        teamImg.value = teamImg.value - 89;
      }
    }, 3500);
  }
};
</script>
<style scoped lang="scss">
@import "@/assets/base.scss";

@keyframes image {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes text {
  0% {
    transform: translateX(110%);
  }

  100% {
    transform: translateX(0);
  }
}

.anima-img {
  animation: image 1s 1;
}

.anima-text {
  animation: text 1s 1;
}

.homeView {
  background-color: #fff;

  .banner {
    position: absolute;
    top: 0;
    width: 100%;
    height: 40vw;
    overflow: hidden;

    .video-home {
      width: 100%;
    }

    .banner-text {
      width: 23%;
      height: 100%;
      margin-left: 39%;
      position: absolute;
      top: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      z-index: 2;
      color: #fff;

      .h2 {
        display: flex;
        justify-content: center;
        letter-spacing: 0.3vw;

        span {
          color: #fff;
          font-weight: 700;
          font-size: $title-font-size1;
          margin-bottom: 3vw;
        }
      }

      p {
        font-size: $title-font-size3;
        font-weight: 700;
        letter-spacing: 0.3vw;
      }

      .banner-btn {
        display: flex;
        margin-top: 4vw;

        .el-button {
          width: 7.7vw;
          height: 2.19vw;
          font-size: $title-font-size6;
          border-radius: 1.6vw;
          line-height: 3.13vw;
          padding: 0;
          color: #fff;
          line-height: 2.19vw;
          text-align: center;
          border: #fff 0.1vw solid;

          &:nth-child(1) {
            background-color: rgba($color: $firm-color, $alpha: 0.8);
          }

          &:nth-child(2) {
            background-color: rgba($color: $botton-bgc, $alpha: 0.8);
            margin-left: 1vw;
          }
        }
      }
    }
  }

  // 版心居中
  .center-text {
    width: $content-center1;
    margin: 0 auto;
  }

  // 公共标题
  .andTile {
    font-size: $title-font-size1;
    color: #3e3f3f;
    text-align: center;
    background-image: url("../../assets/images/and-wwt.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center bottom;
    margin: 0 auto;
    display: flex;
    align-items: end;
    justify-content: center;
    padding-top: 1.2vw;
    // padding-bottom: 2.5vw;
    font-weight: 700;

    .and {
      color: $firm-color;
      font-weight: 700;
    }
  }

  // 关于万物通
  .andConter {
    margin-top: 45vw;

    .andTile {
      background-image: url("../../assets/images/and-wwt.png");
      margin-bottom: 2vw;
    }

    .andText {
      font-size: $title-font-size6;
      color: #666;
      line-height: 1.4;
      margin-bottom: 1vw;
      margin: 0 auto;
      margin-top: 1.1vw;

      p {
        text-indent: 2em;
      }

      b {
        font-weight: 700;
      }

      span {
        color: $firm-color;
      }
    }
  }

  //  为什么选择万物通
  .skill {
    margin-top: 5vw;
    .skill-box {
      display: flex;
      margin-top: 2vw;

      .item {
        width: 20vw;
        height: 14.9vw;
        padding: 0 3vw;
        box-shadow: $box-shadow-all;
        border-radius: 0.5vw;
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: center;
        background-image: url("../../assets/images/home-whxz1bgc.png");
        background-repeat: no-repeat;
        background-position: right bottom;
        transition: all 0.5s;

        &:hover {
          transform: scale(1.1);
        }

        .image {
          width: 4.17vw;
          height: 4.17vw;
          margin-top: 3vw;
        }

        .item-t {
          font-size: $title-font-size4;
          margin: 1vw 0;
          font-weight: 700;
          background-image: url("../../assets/images/home-tbgc.png");
          background-repeat: no-repeat;
          background-position: left bottom;
        }

        .content {
          font-size: $title-font-size6;
          text-align: center;
          color: #666;

          &::before {
            display: inline-block;
            width: 0.6vw;
            height: 0.6vw;
            border-radius: 50%;
            background-color: #666;
            content: "";
          }
        }

        &:nth-child(2) {
          margin: 0 3vw;
          padding: 0 2vw;
          background-image: url("../../assets/images/home-whxz2bgc.png");
        }

        &:nth-child(3) {
          background-image: url("../../assets/images/home-whxz3bgc.png");
        }
      }
    }

    .andTile {
      background-image: url("../../assets/images/home-advantage.png");
    }

    .skill-text {
      margin: 4.25vw 0;
      display: flex;
      justify-content: space-between;

      .item-text {
        color: #707888;
        text-align: center;

        &:nth-child(1) {
          .topr {
            &::after {
              content: "" !important;
            }
          }
        }

        .text-h {
          position: relative;
          display: flex;
          align-items: end;
          justify-content: center;

          ::v-deep .el-statistic {
            color: #666;

            .el-statistic__content {
              font-size: $title-font-size1 !important;
              font-weight: 600 !important;
            }
          }

          .topr {
            font-size: $title-font-size7;

            &::after {
              content: "+";
              color: $firm-color;
              font-size: 1.56vw;
              font-weight: 700;
              position: absolute;
              bottom: 0.3vw;
            }
          }
        }

        .text-t {
          font-size: $title-font-size8;
          color: $firm-color;
        }
      }
    }
  }

  // 首页推荐
  .publicity {
    background-color: #fafcff;
    margin-top: 6.98vw;
    margin-bottom: 3.98vw;
    padding: 2vw 0;

    .demo-tabs {
      width: 69%;
      margin: 0 auto;
      position: relative;

      .tabs-content {
        display: flex;
        justify-content: space-between;

        .tab-img {
          width: 42.9vw;
          height: 28.1vw;
          transition: all 3s;
          flex-shrink: 0;

          img {
            width: 100%;
          }
        }

        .tab-text {
          position: absolute;
          width: 26.4vw;
          height: 17.7vw;
          background-color: #fff;
          box-shadow: 0 0 0.1vw 0.1vw #dedbdb;
          top: 15%;
          right: 2%;
          border-radius: 0.5vw;
          padding: 1.82vw;
          transition: all 2s;
          background-image: url("../../assets/images/home-gyl3.png");
          background-repeat: no-repeat;
          background-position: right bottom;
          background-size: 50% 50%;

          &:nth-child(2) {
            background-image: url("../../assets/images/home-yxtx3.png");
          }

          &:nth-child(3) {
            background-image: url("../../assets/images/home-ssyt3.png");
          }

          .top {
            padding-bottom: 0.9vw;
            display: flex;
            color: #000;
            border-bottom: 0.1vw solid #d9d9d9;

            img {
              width: 4.2vw;
              height: 4.2vw;
              flex-shrink: 0;
            }

            .name {
              display: flex;
              flex-direction: column;
              margin-left: 1vw;

              b {
                font-size: $title-font-size4;
                font-weight: 700;
                background-image: url("../../assets/images/home-tbgc.png");
                background-repeat: no-repeat;
                background-position: left bottom;
                margin-bottom: 0.3vw;
              }

              span {
                font-size: $title-font-size6;
              }
            }
          }

          .content {
            margin-top: 0.5vw;
            font-size: $title-font-size7;
            color: #666;
            line-height: 1.7;

            p {
              display: flex;
              align-items: center;

              &::before {
                content: "";
                display: inline-block;
                width: 0.4vw;
                height: 0.4vw;
                border-radius: 50%;
                background-color: $firm-color;
                margin-right: 0.5vw;
              }
            }
          }

          .tab-btn {
            display: flex;
            justify-content: space-between;
            margin: 1.5vw 0;
            padding: 0 1.5vw;

            .div {
              width: 9.2vw;
              height: 1.8vw;
              border-radius: 1.05vw;
              background-color: #f4f4f4;
              text-align: center;
              line-height: 1.8vw;
              color: #fff;
              font-size: $title-font-size5;
              background-color: $botton-bgc;

              &:nth-child(1) {
                background-color: $firm-color;
              }
            }
          }
        }
      }

      ::v-deep .el-tabs__header {
        // border: none;
        margin-bottom: 3.28vw;

        .el-tabs__nav-wrap::after {
          height: 0;
        }

        .el-tabs__nav {
          width: 100%;
          display: flex;
          justify-content: space-evenly;

          .el-tabs__item {
            font-size: $title-font-size3;
            // font-weight: 700;
            // width: 2vw;
            height: 2.85vw;
            padding: 0;
          }

          .is-active {
            color: $firm-color;
            position: relative;

            &::after {
              width: $web-center;
              height: 5%;
              content: "";
              position: absolute;
              left: 10%;
              bottom: 0;
              background-color: $firm-color;
            }
          }

          .el-tabs__active-bar {
            height: 0;
          }
        }
      }
    }
  }

  //  我们拥有的渠道
  .ditch {
    .andTile {
      background-image: url("../../assets/images/ditch-bgc.png");
    }

    .image-box {
      margin-top: 3vw;

      .images {
        overflow: hidden;
        display: flex;
        transform: translateX();
      }

      img {
        width: 19.8vw;
        height: 13.6vw;
        transition: all 1s;
      }
    }

    .icon-box {
      display: flex;
      justify-content: center;

      .iconfont {
        font-size: 1.8vw;
        color: $firm-color;
      }
    }
  }

  // 资源整合
  .integrate {
    background-image: url("../../assets/images/home-gylzhbgc.png");
    height: 43.02vw;
    background-size: 100%;
    padding: 3vw;

    .andTile {
      background-image: url("../../assets/images/gylzh-tbgc.png");
      margin-bottom: 2.5vw;
    }

    .items {
      // margin-top: 3vw;
      display: flex;
      flex-wrap: wrap;
      width: 68%;
      margin: 0 auto;
      justify-content: space-evenly;

      .item {
        width: 30.4vw;
        height: 12.1vw;
        background-color: #fff;
        border-radius: 0.55vw;
        margin-bottom: 1.2vw;
        display: flex;
        padding: 1.5vw;
        transition: 1s;

        .left {
          font-size: $sign-font-size;
          font-weight: 700;
          color: $botton-bgc;
        }

        .right {
          margin-left: 0.8vw;

          .tit {
            font-size: $title-font-size4;
            font-weight: 700;
            background-image: url("../../assets/images/home-tbgc.png");
            background-repeat: no-repeat;
            background-position: left bottom;
            margin-bottom: 0.5vw;
          }

          .tet {
            font-size: $title-font-size7;
            color: #666;
            line-height: 1;
            margin-bottom: 0.5vw;
            display: flex;
            align-items: center;

            &::before {
              display: inline-block;
              content: "";
              width: 0.4vw;
              height: 0.4vw;
              border-radius: 50%;
              background-color: $firm-color;
              margin-right: 0.5vw;
            }
          }
        }

        &:hover {
          transform: translateY(-8%);
        }
      }
    }
  }

  // 供应链合作
  .teamwork {
    .andTile {
      background-image: url("../../assets/images/teamwork-tbgc.png");
      margin-bottom: 2vw;
    }

    .img-box {
      display: flex;
      justify-content: space-between;

      .image {
        width: 12.5vw;
        height: 16.15vw;
        background-color: #999;
        border-radius: 0.5vw;
        overflow: hidden;

        &:hover {
          .botm,
          .top {
            transform: translateY(-100%);
            transition: all 1s;
          }
        }

        &:nth-child(1) {
          background-image: url("../../assets/images/teamwork-bgc1.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
        }

        &:nth-child(2) {
          background-image: url("../../assets/images/teamwork-bgc2.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
        }

        &:nth-child(3) {
          background-image: url("../../assets/images/teamwork-bgc3.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
        }

        &:nth-child(4) {
          background-image: url("../../assets/images/teamwork-bgc4.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
        }

        &:nth-child(5) {
          background-image: url("../../assets/images/teamwork-bgc5.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
        }

        .top {
          width: 100%;
          height: 100%;
          background-color: rgba($color: $firm-color, $alpha: 0.3);
          text-align: center;
          color: #fff;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          span {
            font-size: $title-font-size4;
            font-weight: 600;

            strong {
              background-image: url("../../assets/images/home-tbgc.png");
              background-repeat: no-repeat;
              background-position: center bottom;
            }
          }

          b {
            font-size: $title-font-size7;
            opacity: 0.5;
          }
        }

        .botm {
          width: 100%;
          height: 100%;
          background-color: rgba($color: $firm-color, $alpha: 0.8);
          color: #fff;
          display: flex;
          flex-direction: column;
          padding: 1.1vw;
          align-items: start;
          position: relative;

          h5 {
            display: none;
          }

          h4 {
            width: 100%;
            font-size: $title-font-size4;
            margin-bottom: 0.3vw;
            text-align: center;
          }

          p {
            font-size: $title-font-size7;
            margin-bottom: 0.2vw;
          }

          span {
            position: absolute;
            width: 3.85vw;
            height: 1.25vw;
            font-size: $title-font-size7;
            color: $firm-color;
            background-color: #fff;
            border-radius: 0.2vw;
            text-align: center;
            line-height: 1.25vw;
            bottom: 0.3vw;
            left: 33%;
          }
        }
      }
    }
  }

  // 数实
  .numReal {
    background-image: url("../../assets/images/numbgc.png");
    background-repeat: no-repeat;
    background-position: left top;
    background-color: #fafcff;
    padding-top: 1vw;
    margin-top: 5vw;
    margin-bottom: 10vw;
    height: 28.75vw;
    position: relative;

    .andTile {
      background-image: url("../../assets/images/home-ssytbgc.png");
      margin-top: 0;
    }

    .num-box {
      width: 68%;
      height: 21.35vw;
      position: absolute;
      bottom: -10%;
      left: 16%;
      right: 16%;
      display: flex;
      padding: 3.125vw 0;
      background-color: #fff;
      box-shadow: $box-shadow-all;
      margin: 0 auto;

      .item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        border-right: solid 0.1vw #d9d9d9;

        &:last-child {
          border: none;
        }

        h4 {
          font-size: $sign-font-size;
          color: $firm-color;
          font-weight: 600;
          margin-bottom: 0.5vw;
        }

        h5 {
          font-size: $title-font-size4;
          background-image: url("../../assets/images/home-tbgc.png");
          background-repeat: no-repeat;
          background-position: left bottom;
          font-weight: 700;
          margin-bottom: 1vw;
        }

        .span {
          font-size: $title-font-size5;
          color: #666;
          width: 60%;
          display: flex;
          align-items: center;
          margin-bottom: 0.5vw;

          &::before {
            display: inline-block;
            content: "";
            width: 0.4vw;
            height: 0.4vw;
            border-radius: 50%;
            background-color: #666;
            margin-right: 0.2vw;
          }
        }

        img {
          margin-top: 1vw;
          width: 4.16vw;
          height: 4.16vw;
        }
      }
    }
  }

  // 品牌
  .brand-box {
    width: 70vw;
    margin: 0 auto;
    overflow: hidden;

    .image-bar {
      img {
        width: 70vw;
      }
    }
  }
}
</style>
